<template>
  <base-layout :visibleContent2="true">
    <template #searchPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        :rules="rules"
        label-width="73px"
        label-position="right"
      >
        <el-row class="">
          <el-col :span="12">财务信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-form-item label="流水编号:">
            <el-input clearable style="width: 220px" v-model="fromdata.costCode" disabled/>
          </el-form-item>
          <el-form-item label="收支类型:" prop="costType">
            <el-select
              style="width: 220px"
              clearable
              ref="dragSelect"
              v-model="fromdata.costType"
              class="drag-select"
            >
              <el-option v-for="item in dict.costTypeOptions" :key="item.label" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
          <el-form-item label="收支时间:">
            <el-input clearable style="width: 220px" v-model="fromdata.costTime" disabled/>
          </el-form-item>
          <el-form-item label="单据日期:">
            <el-input clearable style="width: 220px" v-model="fromdata.receiptsTime" disabled/>
          </el-form-item>
          <el-form-item label="收支来源:" prop="type">
            <el-select
              style="width: 220px"
              clearable
              ref="dragSelect"
              v-model="fromdata.costSource"
              class="drag-select"
            >
              <el-option v-for="item in dict.costSourceOptions" :key="item" :value="item" :label="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="来源编号:" prop="sourceCode">
            <el-input clearable style="width: 220px" v-model.number="fromdata.sourceCode" />
          </el-form-item>
          <el-form-item label="收支方式:" prop="payType">
            <el-select
              style="width: 220px"
              clearable
              ref="dragSelect"
              v-model="fromdata.payTypeDictId"
              class="drag-select"
            >
              <el-option v-for="item in payTypeOptions['支付方式']" :key="item.index" :value="item.value" :label="item.text" />
            </el-select>
          </el-form-item>
          <el-form-item label="收支账号:" prop="name">
            <el-input clearable style="width: 220px" v-model.number="fromdata.costAccount" />
          </el-form-item>
          <el-form-item label="收支金额:" prop="name">
            <el-input clearable style="width: 220px" v-model.number="fromdata.costPrice" />
          </el-form-item>
          <el-form-item label="开票状态:" prop="type">
            <el-select
              style="width: 220px"
              clearable
              ref="dragSelect"
              v-model="fromdata.ticketStatus"
              class="drag-select"
            >
              <el-option v-for="item in dict.ticketStatusOptions" :key="item" :value="item" :label="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注:" prop="name">
            <el-input
              type="textarea"
              :rows="2"
              clearable
              style="width: 220px"
              v-model="fromdata.remark"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel>
      <el-form
        :inline="true"
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        :rules="rules"
        label-width="73px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">票据信息</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-form-item label="发票编号:" prop="name">
            <el-input clearable style="width: 220px" v-model.number="fromdata.invoiceCode" />
          </el-form-item>
          <el-form-item label="发票类型:" prop="type">
            <el-select
              style="width: 220px"
              clearable
              ref="dragSelect"
              v-model="fromdata.invoiceType"
              class="drag-select"
            >
              <el-option v-for="item in dict.invoiceTypeOptions" :key="item" :value="item" :label="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="开票人:" prop="type">
            <el-select
              style="width: 220px"
              clearable
              ref="dragSelect"
              v-model="fromdata.invoiceUserName"
              class="drag-select"
            >
              <el-option v-for="item in dict.invoiceUserOptions" :key="item.id" :value="item.id" :label="item.userName" />
            </el-select>
          </el-form-item>

          <el-form-item label="开票日期:">
            <el-input clearable style="width: 220px" v-model="fromdata.invoiceTime" disabled/>
          </el-form-item>
          <el-form-item label="发票抬头:" prop="name">
            <el-input clearable style="width: 220px" v-model="fromdata.invoiceTitle" />
          </el-form-item>
          <el-form-item label="发票金额:" prop="name">
            <el-input clearable style="width: 220px" v-model.number="fromdata.invoicePrice" />
          </el-form-item>
          <el-form-item label="税率:" prop="name">
            <el-input clearable style="width: 220px" v-model.number="fromdata.taxRate" >
              <template slot="append">%</template>
            </el-input>
          </el-form-item>
        </el-row>
      </el-form>
    </template>
    <template #contentPanel2>
      <el-form
        :inline="true"
        ref="fromdata"
        :show-message="false"
        :hide-required-asterisk="true"
        :model="fromdata"
        :rules="rules"
        label-width="73px"
        label-position="right"
      >
        <el-row>
          <el-col :span="12">收据照片</el-col>
        </el-row>
        <el-divider content-position="center"></el-divider>
        <el-row>
          <el-upload
            action=""
            list-type="picture-card"
            :http-request="httpRequest"
            :fileList="fileList"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-row>
        <el-row>
          <el-col :span="24" align="right">
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </el-col>
        </el-row>
      </el-form>
    </template>
  </base-layout>
</template>
<script>
import {
  getDict,
  fileUpload,
  getImageUrl,
  parseTimeToYMDHMS,
  getStoreId
} from '@/utils/index'
import { details, addData, updateData, getCostCode } from  '@/api/after-sale/finance/bill'
import { userPage } from '@/api/after-sale/personnel/index'
import baseMixin from '@/mixins/base';
export default {
  mixins: [baseMixin({})],
  data() {
    return {
      fromdata: {
        auditStatus: "",
        costAccount: "",
        costCode: "",
        costPrice: '',
        costSource: "",
        costTime: parseTimeToYMDHMS(new Date()),
        costType: "",
        invoiceCode: "",
        invoicePrice: '',
        invoiceTime: parseTimeToYMDHMS(new Date()),
        invoiceTitle: "",
        invoiceType: "",
        invoiceUserName: "",
        payTypeDictId: "",
        photos: [],
        receiptsTime: parseTimeToYMDHMS(new Date()),
        remark: "",
        sourceCode: "",
        storeId: getStoreId(),
        taxRate: '',
        ticketStatus: "",
        userName: ""
      },
      rules: {

      },
      dict: {
        costSourceOptions: ['工单', '采购', '退货', '工资发放'],
        costTypeOptions: [{label: '收入', value: true},{label: '支出', value: false}],
        ticketStatusOptions: ['已开票', '未开票'],
        invoiceTypeOptions: ['普通发票', '专用发票'],
        invoiceUserOptions: [],
      },
      payTypeOptions: {},
      fileList: [],
    }
  },
  async created() {
    const { data } = await getCostCode();
    this.fromdata.costCode = data;

    this.payTypeOptions = getDict(['支付方式']);
    this.getUsers();

    const id = this.$route.query && this.$route.query.id;
    if (id){
      const { data } = await details(id);
      if (data){
        this.fromdata = {
          ...data,
          photos: data.photos?data.photos.split(',') : [],
        }
        this.fromdata.photos.forEach((item, index) => {
          this.fileList.push({
            name: index,
            url: getImageUrl(item),
          })
        })
      }
    }
  },
  methods: {
    async getUsers(){
      const { success, data } = await userPage({}, 10000, 1);
      if (success){
        this.dict.invoiceUserOptions = data.content;
      }
    },
    //车辆展示图上传
    httpRequest(value) {
      fileUpload(value.file).then((res) => {
        let { success, data } = res
        if (success) this.fromdata.photos.push(data.id)
      })
    },
    onSubmit() {
      this.$refs.fromdata.validate(valid => {
        if (valid) {
          this.saveData();
        } else {
          return false
        }
      })
    },
    async saveData() {
      let params = JSON.parse(JSON.stringify(this.fromdata));
      params.photos = params.photos.join(',');
      const { success } = params.id ? await updateData(params) : await addData(params)
      if (success) {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.closeRouter();
      } else {
        this.$message.error('操作失败')
      }
    },
  }
}
</script>
